<template>
  <div class="score-case">
    <div class="table">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>考试时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="list.length > 0">
          <tr v-for="(item, index) in list" :key="item.id">
            <td>{{ index + 1 }}</td>
            <td>{{ item.subject }}</td>
            <!------------------------------- 分数是红色还是黑色下面有两个写法----------------- -->

            <!-- -------------------------------写法 一   ------------------------------------ -->
            <!-- 用v-if  判断  如果分数小于60是红色   如果不是就是黑色-->
            <td class="red" v-if="item.score < 60">{{ item.score }}</td>
            <td v-else>{{ item.score }}</td>

            <!-- -------------------------------写法二:   三元运算符  单独控制这个类到底加不加 --------------------------------->
            <!-- <td :class="item.score < 60 ? 'red' : '' ">{{ item.score }}</td>
            <td>{{ item.score }}</td> -->

            <td>{{ dateFormat(item.date) }}</td>
            <td><a href="#" @click="del(item.id)">删除</a></td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="5">
              <span class="none">暂无数据</span>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="5">
              <span>总分: {{ total }}</span>
              <span style="margin-left: 50px">平均分：{{ avg }}</span>
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
    <div class="form">
      <div class="form-item">
        <div class="label">科目：</div>
        <div class="input">
          <input type="text" placeholder="请输入科目" v-model="subject" />
        </div>
      </div>
      <div class="form-item">
        <div class="label">分数：</div>
        <div class="input">
          <input type="text" placeholder="请输入分数" v-model.number="score" />
        </div>
      </div>
      <div class="form-item">
        <div class="label"></div>
        <div class="input">
          <button class="submit" @click="add">添加</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//导入时间dayjs
import dayjs from "dayjs";

// 1. 遍历展示数据（低于60分红色; 时间用年月日时分秒）

// 2. 删除数据

// 3. 添加数据

// 4. 计算总分和平均分

// 5. 将数据保存到本地存储

export default {
  name: "ScoreCase",
  data() {
    return {
      // list: [
      //   {
      //     id: 15,
      //     subject: "语文",
      //     score: 89,
      //     date: new Date("2022/06/07 10:00:00"),
      //   },
      //   {
      //     id: 27,
      //     subject: "数学",
      //     score: 100,
      //     date: new Date("2022/06/07 15:00:00"),
      //   },
      //   {
      //     id: 32,
      //     subject: "英语",
      //     score: 56,
      //     date: new Date("2022/06/08 10:00:00"),
      //   },
      //   {
      //     id: 41,
      //     subject: "物理",
      //     score: 76,
      //     date: new Date("2022/06/08 10:00:00"),
      //   },
      // ],
      list: JOSN.parse(localStorage.getItem("list")) || [],
      subject: "",
      score: "",
    };
  },
  methods: {
    //格式化时间日期
    dateFormat(d) {
      // console.log(d);
      return dayjs().format("YYYY-MM-DD HH:mm:ss");
    },
    //删除id
    del(id) {
      // this.list = this.filter((item) => {
      //   return item.id !== id;
      // });

      this.list = this.list.filter((item) => item.id != id);
    },

    //把新数据添加到list里  数组添加一个对象
    add() {
      //push()向后添加   unshift()向前面添加
      this.list.push({
        id: Date.now(),
        subject: this.subject,
        score: this.score,
        date: new Date(),
      });
      //清空输入框
      this.subject = this.score = "";
    },
  },
  computed: {
    //计算总分
    total() {
      return this.list.reduce((t, c) => {
        return t + c.score;
      }, 0);
    },

    //计算平均分
    avg() {
      //.toFixed(2)   保留两位小数
      //如果没数据的话就返回值为0  如果不加 下面那个计算结果当没有数据的时候  平均值就是Nan
      if (this.length === 0) return 0;
      return (this.total / this.list.length).toFixed(2);
    },
  },
  //侦听器,侦听数组list的变化  如果他变化了  就更新到本地存储 所以需要添加一个侦听器
  watch: {
    //参数就是变化后的结果val
    list(val) {
      localStorage.setItem("list", JSON.stringify(val));
    },
  },
};
</script>

<style>
.score-case {
  width: 1000px;
  margin: 50px auto;
  display: flex;
}
.score-case .table {
  flex: 4;
}
.score-case .table table {
  width: 100%;
  border-spacing: 0;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.score-case .table table th {
  background: #f5f5f5;
}
.score-case .table table tr:hover td {
  background: #f5f5f5;
}
.score-case .table table td,
.score-case .table table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  padding: 10px;
}
.score-case .table table .red {
  color: red;
}
.score-case .table .none {
  height: 50px;
  line-height: 100px;
  color: #999;
}
.score-case .form {
  flex: 1;
  padding: 20px;
}
.score-case .form .form-item {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.score-case .form .form-item .label {
  width: 60px;
  text-align: right;
  font-size: 14px;
}
.score-case .form .form-item .input {
  flex: 1;
}
.score-case .form .form-item input,
.score-case .form .form-item select {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  width: 200px;
  height: 40px;
  box-sizing: border-box;
  padding: 10px;
  color: #666;
}
.score-case .form .form-item input::placeholder {
  color: #666;
}
.score-case .form .form-item .cancel,
.score-case .form .form-item .submit {
  appearance: none;
  outline: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 10px;
  margin-right: 10px;
  font-size: 12px;
  background: #ccc;
}
.score-case .form .form-item .submit {
  border-color: #069;
  background: #069;
  color: #fff;
}
</style>